<template>
  <div class="about">
    <NavBar>
      <div slot="left_slot" class="main_left flex-top-left">
        <van-icon name="arrow-left" size="0.2rem" @click="go_home" />
      </div>
      <div slot="center_slot" class="main_center flex-top-left">
        <p class="about_title">关于产品介绍</p>
      </div>
    </NavBar>
    <div class="about_infoContainer">
      <div
        class="info_infoContainer info_containerBacColor info_containerPadding info_containerBacInfoStyle"
      >
        <p>
          功能好像很“全面的”的天气H5应用，哈哈但是基本的功能都是有的。比如实时基本天气信息、7日预告天气信息、实时空气质量信息、和实时生活指数信息
        </p>
        <p>
          这里使用Vue2.0和VueCli3.0进行构建编写，UI方面部分借鉴了和风天气H5版本结构样式和一些风格，UI框架使用了Vant2.0版本的部分组件和iconFont字体图标
        </p>
        <p>
          气象数据来源于和风天气API，在此感谢和风天气！！为我这个白嫖党提供了API，此应用属于个人学习测试产品。日后有时间会不断去优化更新一些新的东西，如果有可能会去购买和风天气的商用版API进行更多更好的功能开发
        </p>
        <p>
          对于此应用希望给作者提供一些好的建议！
        </p>
          <div class="userInfo flex-left">
          <div class="wx flex-left-T-B">
          <p class="wxInfo">作者wx：</p>
          <div class="UserImg info_containerBacInfoStyle">
            <img :src="wxUserImg" alt="" srcset="" style="width:1.5rem"/>
          </div>
          </div>
          <div class="qqYx flex-left-T-B">
            <a href="https://wap.mail.qq.com/list/readtemplate?name=wap_ad_tip.html" style="color: #666"><p>进入邮箱</p></a>
            <p>作者邮箱</p>
            <p style="font-size: 0.12rem">1192021120@qq.com</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/common/navBar/NavBar";
export default {
  name: "About",
  components: {
    NavBar,
  },
  data() {
    return {
      wxUserImg: require("../assets/img/wxUser.jpg"),
    };
  },
  methods: {
    go_home() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.about {
  width: 100%;
  height: auto;
  min-height: 100vh;
}
.about_infoContainer {
  padding: 0.4rem 0.16rem;
}
.main_left,
.main_center {
  width: 100%;
  height: 100%;
}
.about_title {
  font-size: 0.16rem;
}
.info_infoContainer {
  font-size: 0.14rem;
  text-align: left;
  font-weight: 600;
  text-indent: 0.2rem;
  line-height: 0.2rem;
}
/* wxUser */
.userInfo{
  margin-top: 0.35rem;
}
.userInfo .wx .wxInfo,
.userInfo .qqYx a{
  margin-bottom: 0.2rem;
}
.userInfo .wx .UserImg{
  padding: 0.1rem;
  background-color: #fff;
}
</style>